<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 绑定css || style 样式</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black
        }

        .normal {
            border: 1px solid red;
            background-color: #f6ffed;
        }

        .happy {
            border: 1px solid darkseagreen;
            background-color: #91d5ff;
        }

        .sad {
            border: 2px solid #4c4c4c;
            background-color: #8c969b;
        }

        .text1 {
            font-size: 18px;
        }

        .text2 {
            text-shadow: 0.1em 0.1em #333
        }

        .text3 {
            border-radius: 25px;
        }
    </style>
</head>
<body>

<div id="root">
    <!-- 1、  绑定class样式(:class='style')字符串写法 适用于：样式类名不确定, 需动态指定-->
    <div class="basic" :class="styleOne" @click="changeMod">{{name}}</div>
    <br/><br/>
    <!-- 2、  绑定class样式(:class='arr')数组写法 适用于：绑定样式个数和名字不确定-->
    <div class="basic" :class="arr" @click="deleteMod">{{name}}</div>
    <br/><br/>
    <!-- 3、  绑定class样式(:class='boj')对象写法 适用于：动态绝对样式是否使用-->
    <div class="basic" :class="cssObj" @click="deleteMod">{{name}}</div>
    <br/><br/>

    <!-- 4、  绑定style样式(::style="styleObj")对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: 'Style Css',
            styleOne: 'normal',
            arr: ['text1', 'text2', 'text3'],
            cssObj: {
                text1: false,
                text2: true
            },
            styleObj: {
                fontSize: '40px'
            }
        },
        methods: {
            changeMod() {
                const arr = ['normal', 'happy', 'sad']
                this.styleOne = arr[Math.floor(Math.random() * 3)]
            },
            deleteMod() {
                this.arr = this.arr.shift()
            }
        }
    });
</script>
</body>
</html>